<template>
	<view class="address-warp page-bg">
		<view class="address-list__wrap" v-if="items.length > 0">
			<view class="address-list" v-for="item in items" :key='item.id'>
				<view class="address-name">
					{{item.realName}} {{item.phoneNumber | phonePartOf}}
				</view>
				<view class="address-info desc">{{item.address}}</view>
				<view class="address-op">
					<image class="address-op__select" @click="setDefault(item)" v-if="item.isDefault || currentId === item.id" src="../../static/common/icon_07_on.png" mode=""></image>
					<image class="address-op__select" @click="setDefault(item)" v-else src="../../static/common/icon_07.png" mode=""></image>
					<view class="address-op__title" @click="setDefault(item)">设为默认地址</view>
					<view class="btn btn-edit" @click="editAddress(item)">编辑</view>
					<view class="btn btn-del" @click="delAddress(item.id)">删除</view>
				</view>
			</view>
		</view>
		
		<none v-else :img="imgPath" :text="text"></none>
		<view class="page-submit" @click="addressAdd('/pages/mine/addressAdd')">+新增收货地址</view>
		
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import none from '../../components/none.vue'
	import icon_none from '../../static/common/icon_none_02.png'
	import { api } from '../../utils/api.js'
	import  common  from '../../utils/common.js'
	export default{
		data() {
			return{
				imgPath: icon_none,
				text: '还没有添加收货地址哦',
				items: '',
				isSelect: true, // 是否是下单时选择地址
				currentId: '-1',
				op: 'list', // selectTeam: 拼单下单页进入， selectOrder: '商品购物订单进入', 'selectCart'购物车下单, list:'由我的地址页进入'
			}
		},
		onLoad(options) {
			let op = options.op
			this.op = op || 'list'
		},
		onShow() {
			this.getItems()
		},
		methods:{
			 getItems() {
				let items = api.getAddressListAsync({},(res) => {
					 this.items = res.items
				}) 
			},
			
			addressAdd(url) {
				this.$link(url)
			},
			
			setDefault(item) {
				// 设置默认地址操作时
				console.log(item);
				api.updateDefaultAddress({id: item.id}, (res) => {
					this.getItems()
					this.$showToast('默认地址设置成功~')
				})
			},
			
			editAddress(item) {
				console.log(item)
				common.setStorage('editAddress', item)
				this.$link('/pages/mine/addressAdd' )
			},
			
			delAddress(id) {
				this.$showModal('', '您确定要删除地址吗?', () => {
					api.removeAddressAsync({ id }, () => {
						this.$showToast('删除成功~')
						this.getItems()
					})
				})
			}
		},
		components:{
			none
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.address-warp{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.address-list{
		.br;
		background-color: @f;
		margin-bottom: 20rpx;
		.content-20;
		.address-name{
			width: 100%;
			.fw;
			color: @font-orange-color;
			.f30;
		}
		.address-info{
			.f24;
			padding: 15rpx 0 30rpx 0;
		}
		.address-op{
			.flex-base;
			justify-content: flex-start;
			
			
		}
		.address-op__select{
			width: 30rpx;
			height: 30rpx;
		}
		.address-op__title{
			.f26;
			flex-grow: 2;
			padding: 0 20rpx;
			box-sizing: border-box;
			
		}
		.btn{
			height: 50rpx;
			line-height: 50rpx;
			.f26;
			background-color: @f;
			margin-left: 20rpx;
		}
		.btn-edit{
			color: @font-orange-color;
			border: 1px solid @font-orange-color;
		}
		.btn-del{
			color: @theme-color;
			border: 1px solid @theme-color;
		}
	}
	
</style>
